<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>

		</style>
		<script src="./src/vue.js"></script>
	</head>

	<body>

		<div id="app">
			<button id="btn">改变数据</button>
			<h2 id="title">这是标题</h2>
		</div>

		<script>
			var data = {
				title: '新闻',
				miaov:1
			}

			// 数据劫持，转成getter和setter

			observer(data)


			function observer(obj){
				Object.keys(obj).forEach((item) => {
					defineReactive(obj,item,obj[item])
				})
			}

			function defineReactive(obj,key,value){
				Object.defineProperty(obj,key, {
					get(){
					    console.log("我访问数据了")
						return value;
					},
					set(newValue){
					   console.log("我设置了新值")

						value = newValue;
						title.innerHTML = newValue ;
					}
				})
			}

			console.log(data);


			var title = document.getElementById('title');
			var btn = document.getElementById('btn');

			title.innerHTML = data.title;




			btn.onclick = function (){
				data.title = '数据变了';
			}



		</script>

	</body>
</html>